<template>
	<view class="head" :style="{ height: totalHeight + 'px' }">
		<!-- 手机信息栏+间隙高度- -->
		<view :style="{ height: statusBarHeight + capsuleTop + 'px' }"></view>

		<!-- 微信小程序胶囊 -->
		<view :style="{ height: userInfoHeight + 'px', lineHeight: userInfoHeight + 'px' }">
			<slot></slot>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";

	//总高
	const totalHeight = ref();
	//用户信息高度
	const userInfoHeight = ref();

	//信息栏到胶囊间距
	const capsuleTop = ref();

	//信息栏高度
	const statusBarHeight = ref();

	//胶囊高度
	const capsuleHeight = ref();

	// #ifdef MP-WEIXIN
	const systemInfo = uni.getSystemInfoSync();
	const menuBarInfo = uni.getMenuButtonBoundingClientRect();
	statusBarHeight.value = systemInfo.statusBarHeight;
	capsuleTop.value = menuBarInfo.bottom - statusBarHeight.value - menuBarInfo.height;
	capsuleHeight.value = menuBarInfo.height;
	totalHeight.value = menuBarInfo.bottom;
	userInfoHeight.value = menuBarInfo.bottom - systemInfo.statusBarHeight;
	// #endif

	// #ifndef MP-WEIXIN
	totalHeight.value = 45;
	statusBarHeight.value = 5;
	capsuleTop.value = 5;
	userInfoHeight.value = 25;
	// #endif
</script>